<!DOCTYPE html>
<html>
<head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
    // Calls the children callback numTimes to produce a repeated component

    function Repeat(props) {
        let items = [];
        for (let i = 0; i < props.numTimes; i++) {
            items.push(props.children(i));
        }
        return <div>{items}
            // ignored
            <div />

            <div></div>

            <div>{false}</div>

            <div>{null}</div>

            <div>{undefined}</div>

            <div>{true}</div>
        </div>;
    }

    function ListOfTenThings() {
        return (
                <Repeat numTimes={10}>
                    {(index) => <div key={index}>This is item {index} in the list</div>}
                </Repeat>
        );
    }
    ReactDOM.render(ListOfTenThings(), document.getElementById("example"));



</script>
</body>
</html>

